import { defineComponent, reactive, ref } from "vue";
import Popup from "@/components/Popup/Popup";
import styles from "./Add.module.less";
import to from "await-to-js";
import _ from "lodash";
import { message } from "ant-design-vue";
import { $upload } from "@/apis/common/upload/upload";
import { FileOutlined, LoadingOutlined, UploadOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ["change"],
  setup(props, { emit, expose }) {
    const addPopupRef = ref(null as any);
    const formRef = ref(null as any);
    const state = reactive({
      type: "add",
      form: {
        id: null,
        name: null,
        week: null,
        author: null,
        tempo: null,
        hasChord: 0,
        melodyFile: null,
        chordFile: null,
        remark: null,
        sort: null,
      },
      melodyFile_loading: false,
      chordFile_loading: false,
    })
    const editing = ref(false);
    // 获取详情
    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.form.id));
      if (!err) {
        const resultObj = res?.data?.data;
        state.form.name = resultObj?.name || null;
        state.form.week = resultObj?.week || null;
        state.form.author = resultObj?.author || null;
        state.form.tempo = resultObj?.tempo || null;
        state.form.hasChord = resultObj?.hasChord || 0;
        state.form.melodyFile = resultObj?.melodyFile || null;
        state.form.chordFile = resultObj?.chordFile || null;
        state.form.remark = resultObj?.remark || null;
        state.form.sort = resultObj?.sort || 0;
      }
    }
    // 打开弹窗
    const open = async ({ type, id }) => {
      state.type = type;
      state.form.id = id;
      if (type === 'edit') {
        await getDetail();
      }
      addPopupRef.value.open();
    }
    const submit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          editing.value = true;
          const params = _.cloneDeep(state.form);
          const [err, res]: any = await to((state.type === 'edit' ? props.service?.edit : props.service?.add)(params));
          if (!err) {
            message.success(state.type === 'edit' ? '编辑成功' : '添加成功');
            addPopupRef.value.close();
            emit('change');
          }
          editing.value = false;
        })
    }
    const beforeUploadMelodyFile = async (file) => {
      state.melodyFile_loading = true;
      const formData = new FormData();
      formData.append("file", file);
      const [err, res]: any = await to($upload(formData));
      if (err) {
        state.form.melodyFile = null;
        state.melodyFile_loading = false;
        return;
      }
      state.form.melodyFile = res.data?.data?.ossUpload?.fileUrl || null;
      state.melodyFile_loading = false;
      return false;
    }
    const beforeUploadChordFile = async (file) => {
      state.chordFile_loading = true;
      const formData = new FormData();
      formData.append("file", file);
      const [err, res]: any = await to($upload(formData));
      if (err) {
        state.form.chordFile = null;
        state.chordFile_loading = false;
        return;
      }
      state.form.chordFile = res.data?.data?.ossUpload?.fileUrl || null;
      state.chordFile_loading = false;
      return false;
    }
    expose({
      open,
    })
    return () => (
      <Popup ref={addPopupRef}
        title={state.type === 'edit' ? "编辑曲谱文件记录" : "添加曲谱文件记录"}
        width="800px"
        oriState={state}
        v-slots={{
          footer: () => <>
            <a-button type="primary" loading={editing.value} onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { addPopupRef.value.close() }}>取消</a-button>
          </>
        }}
      >
        <div class={styles.container}>
          <div class={styles.formBox}>
            <a-form style={{ width: "100%" }} ref={formRef} model={state.form} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 28 }}>
              <a-form-item required label="名称" name="name">
                <a-input v-model:value={state.form.name} placeholder="请输入名称" />
              </a-form-item>
              <a-form-item required label="第几周" name="week">
                <a-input-number style={{ width: "200px" }} min={1} v-model:value={state.form.week} placeholder="请输入第几周" />
              </a-form-item>
              <a-form-item label="作者" name="author">
                <a-input v-model:value={state.form.author} placeholder="请输入作者" />
              </a-form-item>
              <a-form-item label="速度" name="tempo">
                <a-input-number style={{ width: "200px" }} v-model:value={state.form.tempo} placeholder="请输入速度" />
              </a-form-item>
              <a-form-item label="是否带和弦" name="hasChord">
                <a-radio-group
                  v-model:value={state.form.hasChord}
                  name="radioGroup"
                >
                  <a-radio value={1}>是</a-radio>
                  <a-radio value={0}>否</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item required label="旋律谱文件" name="melodyFile">
                <a-upload show-upload-list={false} before-upload={beforeUploadMelodyFile}>
                  <a-button>
                    {state.melodyFile_loading ? <LoadingOutlined /> : <UploadOutlined />}
                    上传文件
                  </a-button>
                </a-upload>
                <div class={styles.file}>
                  <FileOutlined />
                  <span class={styles.fileNameBox}>
                    {state.form.melodyFile ? <span class={styles.fileName}>{state.form.melodyFile}</span> : <span class={styles.noFile}>暂未上传</span>}
                  </span>
                </div>
              </a-form-item>
              <a-form-item label="和弦谱文件" name="chordFile">
                <a-upload show-upload-list={false} before-upload={beforeUploadChordFile}>
                  <a-button>
                    {state.chordFile_loading ? <LoadingOutlined /> : <UploadOutlined />}
                    上传文件
                  </a-button>
                </a-upload>
                <div class={styles.file}>
                  <FileOutlined />
                  <span class={styles.fileNameBox}>
                    {state.form.chordFile ? <span class={styles.fileName}>{state.form.chordFile}</span> : <span class={styles.noFile}>暂未上传</span>}
                  </span>
                </div>
              </a-form-item>
              <a-form-item label="备注" name="sort">
                <a-textarea v-model:value={state.form.remark} placeholder="请输入备注" />
              </a-form-item>
              <a-form-item label="排序" name="sort">
                <a-input-number style={{ width: "200px" }} min={0} v-model:value={state.form.sort} placeholder="请输入排序" />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </Popup>
    )
  }
})